<template>
	<div class="hello">
		<h1 class="msg">{{ msg }}</h1>
		<p class="vue">
			For a guide and recipes on how to configure / customize this project,
			<br />check out the hello world
			<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
				>vue-cli documentation</a
			>.
		</p>
		<h3>Installed CLI Plugins</h3>
		<ul>
			<li>
				<a
					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
					target="_blank"
					rel="noopener"
					>babel</a
				>
			</li>
			<li>
				<a
					href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
					target="_blank"
					rel="noopener"
					>eslint</a
				>
			</li>
		</ul>
		<h3>Essential Links</h3>
		<ul>
			<li>
				<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
			</li>
			<li>
				<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
					>Forum</a
				>
			</li>
			<li>
				<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
					>Community Chat</a
				>
			</li>
			<li>
				<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
					>Twitter</a
				>
			</li>
			<li>
				<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
			</li>
		</ul>
		<h3>Ecosystem</h3>
		<ul>
			<li>
				<a href="https://router.vuejs.org" target="_blank" rel="noopener"
					>vue-router</a
				>
			</li>
			<li>
				<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
			</li>
			<li>
				<a
					href="https://github.com/vuejs/vue-devtools#vue-devtools"
					target="_blank"
					rel="noopener"
					>vue-devtools</a
				>
			</li>
			<li>
				<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
					>vue-loader</a
				>
			</li>
			<li>
				<a
					href="https://github.com/vuejs/awesome-vue"
					target="_blank"
					rel="noopener"
					>awesome-vue</a
				>
			</li>
		</ul>
	</div>
</template>

<script>
import { init } from "../utils";
export default {
	name: "HelloWorld",
	props: {
		msg: String,
	},
	methods: {
		name() {
			console.log("输出一个data");
		},
	},
	mounted() {
		function person(props) {
			this.kind = props;
			this.say = function () {
				console.log("say");
			};
			console.log("this", this);
		}
		person.prototype.eat = function (food) {
			console.log(this.name + " is eating " + food);
		};
		function student(name, props) {
			//构造函数继承不能继承父类原型上的属性和方法，只能继承构造函数里面的属性和方法
			this.name = name;
			person.call(this, props);
		}
		var xuesheng = new student("xiaoming", "餐数");
		console.log(xuesheng.kind);
		console.log(xuesheng);
		console.log(Object.prototype.toString.call(person));
		//console.log(xuesehng.eat("chifan"));//不能继承原型方法和属性
		// Cat.prototype.constructor = Cat;
		// console.log(Cat.prototype.constructor == Animal);
		// xiaoming.prototype = Student.prototype;
		// 每个对象都有__proto__隐式原型,等于构造函数的原型对象
		// 普通对象和实例对象都有constructor
		// 每个对象的constructor = 构造函数原型对象的constructor = 构造函数
		// 构造函数的原型对象prototype的constructer指针,指向构造函数
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
	margin: 40px 0 0;
}
ul {
	list-style-type: none;
	padding: 0;
}
li {
	display: inline-block;
	margin: 0 10px;
}
a {
	color: #42b983;
}
</style>
